<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BOM-元素的操作</title>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div class="cls">div3</div>
    <div class="cls">div4</div>
</body>
<script>
//文档对象模型
//将HTML中的各个组成部分，封装为对象，借助这些对象，可以将THML文档进行增删改查的动态操作
//Element:元素对象
//Attribute:属性对象
//Text:文本对象
//他们都在Document:文档对象

//document获取标签对象的方法
    //根据元素的id属性值获取元素对象,
    let div1=document.getElementById("div1")
    //根据标签名称获取元素的对象，返回数组
    let divs = document.getElementsByTagName("div");
    //根据元素class属性值获取元素的对象,返回数组
    let cls = document.getElementsByClassName("cls");
    //根据name属性值获取元素的对象，返回数组
    let username = document.getElementsByName("username")
    //子元素对象，parentElement属性，获取当前元素的符元素
    let boby = div1.parentElement

//document对标签对象的操作
    //createElement(标签名)          创建一个新的元素    
    //appendChild(子标签)            将指定的子标签添加到父类标签中
    //removeChild(子标签)            用父类标签删除子类标签
    //replaceChild(新标签，旧标签)
//document给标签对象设置属性的操作
    //setAttribute(属性名，属性值)    设置属性
    //getAttribute(属性名)           根据属性名获取属性值
    //removeAttribute(属性名)        根据属性名移除指定的属性
    //style                          为元素添加样式 
//document给标签对象Text文本的操作
    //innerText                      添加文本，不解析标签，就是纯文本，在给它加样式表标签它解析不了
    //innerHTML                      添加文本，并解析标签，相反

</script>
</html>